<template>
  <div class="container" v-loading="loading">
    <el-divider content-position="left"><span class="title-left-color">收货信息</span></el-divider>
    <div style="margin: 0 70px">
      <el-descriptions :column="2" size="default">
        <el-descriptions-item label="收货人姓名">{{ form.receive_name }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ form.receive_mobile }}</el-descriptions-item>
        <el-descriptions-item label="联系地址">{{ form.receive_address }}</el-descriptions-item>
        <el-descriptions-item label="物流公司">{{ form.express_name }}</el-descriptions-item>
        <el-descriptions-item label="物流单号">{{ form.express_number }} </el-descriptions-item>
      </el-descriptions>
    </div>
    <div style="margin: 0 70px">
      <el-descriptions :column="2" size="default">
        <el-descriptions-item label="收货信息">{{ form.receive_name }} {{ form.receive_mobile }} {{ form.receive_address }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <el-divider content-position="left"><span class="title-left-color">订单信息</span></el-divider>
    <div style="margin: 0 70px">
      <el-descriptions :column="2" size="default">
        <el-descriptions-item label="订单编号">{{ form.order_sn }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">{{ form.order_status_name }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ handleVerifyFormatDate(form.create_time) }}</el-descriptions-item>
        <el-descriptions-item label="接单时间">{{ handleVerifyFormatDate(form.start_time) }}</el-descriptions-item>
        <el-descriptions-item label="收货时间">{{ handleVerifyFormatDate(form.receive_time) }}</el-descriptions-item>
        <el-descriptions-item label="尾款支付时间">{{ handleVerifyFormatDate(form.pay_time) }}</el-descriptions-item>
        <el-descriptions-item label="转账时间">{{ handleVerifyFormatDate(form.transfer_time) }}</el-descriptions-item>
        <el-descriptions-item label="取消时间">{{ handleVerifyFormatDate(form.cancel_time) }}</el-descriptions-item>
        <el-descriptions-item label="商家备注">{{ form.admin_note }}</el-descriptions-item>
        <el-descriptions-item label="收款账户">支付宝账号:{{ form.alipay_account }},姓名:{{ form.alipay_username }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <el-divider content-position="left"><span class="title-left-color">商品信息</span></el-divider>
    <div style="margin: 0 70px">
      <el-descriptions :column="2" size="default">
        <el-descriptions-item label="商品名称">{{ form.goods_name }}</el-descriptions-item>
        <el-descriptions-item label="商家出价">{{ form.real_price }}</el-descriptions-item>
        <el-descriptions-item label="接单时间">{{ form.deposit }}</el-descriptions-item>
        <el-descriptions-item label="定金">{{ form.receive_time }}</el-descriptions-item>
        <el-descriptions-item label="尾款">{{ form.balance }}</el-descriptions-item>
        <el-descriptions-item label="尾款">{{ form.balance }}</el-descriptions-item>
        <el-descriptions-item label="商品图片">
          <el-image style="width: 160px; height: 160px" :src="goodsImageList[0]" :preview-src-list="goodsImageList"></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="实物图">
          <el-image style="width: 160px; height: 160px" :src="imageList[0]" :preview-src-list="imageList"></el-image>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <el-divider content-position="left"><span class="title-left-color">操作记录</span></el-divider>
    <el-table :data="form.log" border class="table" :reserve-selection="true">
      <el-table-column type="index" align="center"> </el-table-column>
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="type_name" label="操作平台" align="center"> </el-table-column>
      <el-table-column prop="user_id" label="用户id" align="center"> </el-table-column>
      <el-table-column prop="username" label="用户名" align="center"> </el-table-column>
      <el-table-column prop="operation" label="描述" align="center"> </el-table-column>
      <el-table-column prop="create_time" label="创建时间" align="center" :formatter="(row: IOrderLog) => handleVerifyFormatDate(Number(row.create_time))"> </el-table-column>
    </el-table>
    <div class="footer-center">
      <el-button :disabled="disabledbtn" @click="cancelSubmit">返 回</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { postOrPutType } from "@/constants";
import type { HasId, ViewMode } from "@/types/common";
import { handleVerifyFormatDate } from "@/utils/utils";
import { useState } from "@/hooks/useState.ts";
import { IMG_URL } from "@/utils/config";
import type { IOrderLog, IRecycleOrderDetail } from "@/types/recoveryManage/recycleOrder";
import { getRecycleOrderByIdInfo } from "@/utils/api/recycleOrder";
const { disabledbtn, loading, toggleState } = useState();
interface Props {
  id: number;
}
const { id } = defineProps<Props>();

const formStatus = defineModel<ViewMode>("formStatus", { required: true });
const emit = defineEmits<{
  handleInitData: [];
  handleToPrint: [id: number];
}>();

const isDisabledbtn = ref(false);
const methodType = ref<postOrPutType>("PUT");
const form = reactive<IRecycleOrderDetail>({
  id: 0,
  receive_name: "",
  receive_address: "",
  receive_mobile: "",
  order_sn: "",
  deposit_trade_no: "",
  balance_trade_no: "",
  create_time: 0,
  send_time: 0,
  order_status: "",
  order_status_name: "",
  deposit: "",
  balance: "",
  express_number: "",
  express_name: "",
  start_time: 0,
  transfer_time: 0,
  receive_time: 0,
  cancel_time: 0,
  admin_note: "",
  goods_image: "",
  goods_name: "",
  goods_type: "",
  valuation: "",
  image: [],
  real_price: "",
  log: [],
  store: {
    name: "",
    phone: ""
  },
  alipay_username: "",
  alipay_account: "",
  pay_time: 0
});
const goodsImageList = ref<string[]>([]);
const imageList = ref<string[]>([]);

onMounted(() => {
  console.log("Component mounted!");
});

/* formStatus处理器 */
const statusHandlers: Record<ViewMode, () => void> = {
  view: () => {
    isDisabledbtn.value = true;
  },
  edit: () => {
    methodType.value = "PUT";
  },
  add: () => {
    methodType.value = "POST";
  },
  none: () => {
    /* 初始化数据 */
    handleInitData();
  }
};
/* 监听formStatus,新增，编辑，查看的时候都可以打开模态框，又是有不同的操作和效果，需要单独判断，none为模态框关闭的情况，需要初始化数据 */
watch(formStatus, newValue => {
  const handler = statusHandlers[newValue];
  handler?.();
});
/*  */
watch(
  () => id,
  newValue => {
    if (newValue == 0) {
      /* 初始化数据 */
    } else {
      form.id = newValue;
      handleGetMallOrderByIdInfo(id);
    }
  }
);

/* 初始化数据 */
function handleInitData() {
  methodType.value = "POST";
  isDisabledbtn.value = false;
  form.id = 0;

  form.receive_name = "";
  form.receive_address = "";
  form.receive_mobile = "";
  form.express_number = "";
  form.express_name = "";

  form.order_sn = "";

  form.alipay_account = "";
  form.alipay_username = "";
  form.order_status_name = "";

  form.goods_name = "";
  form.real_price = "";
  form.deposit = "";
  form.balance = "";
  form.valuation = "";

  form.create_time = 0;
  form.send_time = 0;
  form.start_time = 0;
  form.transfer_time = 0;
  form.receive_time = 0;
  form.pay_time = 0;
  form.cancel_time = 0;
  form.admin_note = "";

  form.store.name = "";
  form.store.phone = "";
  /* 操作日志 */
  form.log = [];

  goodsImageList.value = [];
  imageList.value = [];
}
/* 获取订单详情数据 */
function handleGetMallOrderByIdInfo(id: number) {
  toggleState(true);
  getRecycleOrderByIdInfo<IRecycleOrderDetail, HasId>({ id })
    .then(res => {
      form.id = res.result.id;
      form.receive_name = res.result.receive_name;
      form.receive_address = res.result.receive_address;
      form.receive_mobile = res.result.receive_mobile;
      form.express_number = res.result.express_number;
      form.express_name = res.result.express_name;

      form.order_sn = res.result.order_sn;

      form.alipay_account = res.result.alipay_account;
      form.alipay_username = res.result.alipay_username;
      form.order_status_name = res.result.order_status_name;

      form.goods_name = res.result.goods_name;
      form.real_price = res.result.real_price;
      form.deposit = res.result.deposit;
      form.balance = res.result.balance;
      form.valuation = res.result.valuation;
      goodsImageList.value = res.result.goods_image.split(",").map(item => IMG_URL + item);
      imageList.value = res.result.image.map(item => IMG_URL + item);

      form.create_time = res.result.create_time;
      form.send_time = res.result.send_time;
      form.start_time = res.result.start_time;
      form.transfer_time = res.result.transfer_time;
      form.receive_time = res.result.receive_time;
      form.pay_time = res.result.pay_time;
      form.cancel_time = res.result.cancel_time;
      form.admin_note = res.result.admin_note;

      form.store.name = res.result.store.name;
      form.store.phone = res.result.store.phone;
      /* 操作日志 */
      form.log = res.result.log;
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}
/* 保存或编辑 取消提交 */
function cancelSubmit() {
  // clearData();
  // activeName = "one";
  emit("handleInitData");
}
</script>

<style lang="scss" scoped>
/* 修改select的盒模型 */
.el-select {
  display: block;
}
/* 底部按钮居中 */
.footer-center {
  margin: 10px 0;
  text-align: center;
}

.img-item {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}
</style>
